<template>
    <div>
<h3>添加门店</h3>
<table class="table table-bordered">
    <tbody>
        <tr>
            <td>门店名称</td>
            <td>
                <input type="text" v-model="querinfo.shopName">
            </td>
        </tr>

        <tr>
            <td>分店名称</td>
            <td>
                <input type="text" v-model="querinfo.branchName">
            </td>
        </tr>

        <tr>
            <td>门店图片</td>
            <td>
                <input type="file" @change="img">
                <img :src="querinfo.photo" width="100" height="100">
            </td>
        </tr>


        <tr>
            <td>门店创建时间</td>
            <td>
                <input type="date" v-model="querinfo.beginTime">
            </td>
        </tr>


        <tr>
            <td>是否营业</td>
            <td>
                <input type="radio" name="State" :value="1" v-model="querinfo.state">是
                <input type="radio" name="State" :value="0" v-model="querinfo.state">否
            </td>
        </tr>

        <tr>
            <td>门店特色</td>
            <td>
                <input type="checkbox" name="Feature" value="承办婚礼" v-model="querinfo.feature">承办婚礼
                <input type="checkbox" name="Feature" value="庆功宴" v-model="querinfo.feature">庆功宴
                <input type="checkbox" name="Feature" value="满月酒" v-model="querinfo.feature">满月酒
                <input type="checkbox" name="Feature" value="团建" v-model="querinfo.feature">团建
            </td>
        </tr>

        <tr>
            <td>门店介绍</td>
            <td>
                <textarea cols="30" role="5" v-model="querinfo.desc"></textarea>
            </td>
        </tr>

        <tr>
            <td>门店位置</td>
            <td>
                <select v-model="querinfo.addressId">
                    <option value="">请选择</option>
                    <option :value="item.id" v-for="item in data.list">{{ item.address }}</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>门店类型</td>
            <td>
                <select v-model="querinfo.shopType">
                    <option value="">请选择</option>
                    <option :value="1">三星酒店</option>
                    <option :value="2">五星酒店</option>
                    <option :value="3">商务酒店</option>
                    <option :value="4">民俗酒店</option>
                    <option :value="5">总统套房</option>
                </select>
            </td>
        </tr>
        

        <tr>
            <td></td>
            <td>
                <input type="button" value="添加" @click="add" class="btn btn-success">
            </td>
        </tr>
    </tbody>
</table>
    </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import { ref,reactive,onMounted } from 'vue';
import { useRoute,useRouter } from 'vue-router';
const route=useRoute();
const router=useRouter();

onMounted(()=>{
    ShowAddress();
})

let data:any=reactive({
    list:[]
})

let querinfo:any=reactive({
  "shopName": "",
  "branchName": "",
  "photo": "",
  "beginTime": "",
  "state": "",
  "feature": [],
  "desc": "",
  "addressId": "",
  "shopType": "",
})


const ShowAddress=()=>{
    axios({
        method:"get",
        url:"/api/Shop/GetShopAddresses",
    })
    .then(res=>{
        data.list=res.data;
    })
    .catch(err=>{
        console.log(err);
    })
}

//添加
const add=()=>{
    querinfo.feature=querinfo.feature.toString()
    axios({
        method:"post",
        url:"/api/Shop/AddShop",
        data:querinfo
    })
    .then(res=>{
        if(res.data>0){
            alert('添加成功');
        }
    })
    .catch(err=>{
        console.log(err);
    })
}


//上传图片
const img=(e:any)=>{
    console.log(e);
    let p=e.target.files[0];
    let f=new FormData();
    f.append('file',p);
    axios({
        method:"post",
        url:"/api/Imgs/Files",
        data:f
    })
    .then(res=>{
        querinfo.photo=res.data
    })
    .catch(err=>{
        console.log(err);
    })
}






</script>















<style scoped>

</style>